<template>
	<view class="">
		<view class="content">
			<view class="top">
				<image class="you" src="../../static/右.png" mode=""></image>
				<view>
					<p class="sq">家属房申请</p>
				</view>
			</view>
			<view class="minu">
				<p class="wz">尊敬的用户：</p>
				<p class="wz2">为保障安全，清如实填写，感谢您的支持。</p>
				<view class="buttom">
					<view class="xm">姓名</view>
					<input class="input" type="text" placeholder="请输入用户名"/>
				</view>
				<view class="buttom">
					<view class="dw">所属单位</view>
					<input class="input" type="text" placeholder="xxx单位"/>
				</view>
				<view class="buttom">
					<view class="jsxm">家属姓名</view>
					<input class="input" type="text" placeholder="请输入家属姓名"/>
				</view>
				<view class="buttom">
					<view class="lxfs">家属联系方式</view>
					<input class="input2" type="text" placeholder="请输入家属联系方式"/>
				</view>
				<view class="buttom">
					<view class="xm">关系</view>
					<input class="input" type="text" placeholder="请选择家属关系"/>
				</view>
				<view class="buttom">
					<view class="jsf">家属房</view>
					<input class="input" type="text" placeholder="请选择家属房地址"/>
				</view>
			</view>
		</view>
		<view class="tj">
			<button>提交</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
	.content{
		width: 100%rpx;
		height: 800rpx;
		background-color: #5282F0;
		background-image: linear-gradient(0.5turn, #5282F0, white);

	}
	.top{
		width: 100%rpx;
		height: 160rpx;
		display: flex;
		line-height: 160rpx;
	}
	.top .you{ 
		width: 25rpx;
		height: 35rpx;
		margin-left: 40rpx;
		margin-top: 70rpx;
	}
	.sq{
		width: 600rpx;
		height: 160rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 160rpx;
	}
	.minu{ 
		width: 690rpx;
		height: 700rpx;
		background-color: #FFFFFF;
		margin: 0 auto;
		border-radius: 15rpx;
	}
	.minu .wz{ 
		margin-left: 20rpx;
		padding-top: 20rpx;
		font-weight: bold;
	}
	.minu .wz2{ 
		margin-left: 25rpx;
		padding-top: 20rpx;
		color: #555555;
		font-size: 28rpx;
	}
	.buttom{ 
		display: flex;
		border-bottom: 1rpx solid #eee;
	}
	.buttom .xm{ 
		margin-right: 100rpx;
		padding-top: 30rpx;
		padding-left: 40rpx;
		margin-bottom: 30rpx;
	}
	.buttom .input{ 
		padding-top: 30rpx;
		padding-left: 40rpx;
	}
	.buttom .dw{ 
		margin-right: 40rpx;
		padding-top: 30rpx;
		padding-left: 40rpx;
		margin-bottom: 30rpx;
	}
	.buttom .jsxm{ 
		margin-right: 40rpx;
		padding-top: 30rpx;
		padding-left: 40rpx;
		margin-bottom: 30rpx;
	}
	.buttom .lxfs{ 
		padding-top: 30rpx;
		padding-left: 40rpx;
		margin-bottom: 30rpx;
	}
	.buttom .input2{ 
		padding-top: 30rpx;
		padding-left: 15rpx;
	}
	.buttom .jsf{ 
		margin-right: 70rpx;
		padding-top: 30rpx;
		padding-left: 40rpx;
		margin-bottom: 30rpx;
	}
	.tj{ 
		padding-top: 430rpx;
	}
	.tj button{ 
		width: 720rpx;
		height: 80rpx;
		background-color: #5282F0;
		color: #FFFFFF;
		border-radius: 40rpx;
		text-align: center;
		line-height: 80rpx;
	}
</style>
